<template>
  <div>
    <div class="search">
      <span>收货人 :</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.username"
        placeholder="请输入内容"
        size="small"
        @input="input1"
      ></el-input>
      <span style="margin: 0 0 0 1%">订单状态 :</span>
      <!-- <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.status"
        placeholder="请输入内容"
        size="small"
        @input="input2"
      ></el-input> -->
      <el-select
        v-model="query.status"
        placeholder="请选择"
        size="small"
        style="width: 10%; margin: 0 0 0 1%"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin: 0 0 0 1%">订单编码 :</span>
      <el-input
        style="width: 10%; margin: 0 0 0 1%"
        v-model="query.id"
        placeholder="请输入内容"
        size="small"
        @input="input2"
      ></el-input>
      <el-button
        type="primary"
        size="small"
        style="margin: 0 0 0 1%"
        @click="search"
        >搜索</el-button
      >
    </div>
    <div class="table">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单编码" width="180">
        </el-table-column>
        <el-table-column prop="username" label="收货人" width="180">
        </el-table-column>
        <el-table-column prop="shopnames" label="下单商品" width="180">
        </el-table-column>
        <el-table-column prop="times" label="下单时间"> </el-table-column>
        <el-table-column prop="passId" label="快递单号"> </el-table-column>
        <el-table-column prop="brand" label="品牌"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="passName" label="快递公司"> </el-table-column>
        <el-table-column prop="reason" label="保修原因"> </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">已寄出</span>
            <span v-else-if="scope.row.status == 2">已收到</span>
            <span v-else-if="scope.row.status == 3">已发出</span>
            <span v-else-if="scope.row.status == 4">用户已签收</span>
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作栏">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              style="margin: 0 0 0 1%"
              @click="open(scope.row)"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <dialogView ref="dialog" />
  </div>
</template>

<script>
import { getRepairlist1 } from "@/api/login";
import dialogView from "./dialogView.vue";
export default {
  components: {
    dialogView,
  },
  data() {
    return {
      tableData: [],
      query: {
        username: "", //接收人
        id: "", //订单id
        status: "",
      },
      pagination: {
        total: 0,
        pageNo: 1,
      },
      options: [
        {
          value: "1",
          label: "已寄出",
        },
        {
          value: "2",
          label: "已收到",
        },
        {
          value: "3",
          label: "已发出",
        },
        {
          value: "4",
          label: "已签收",
        },
      ],
    };
  },

  created() {
    this.getData();
  },
  methods: {
    getData() {
      //置空
      // this.pagination.pageNo=1
      let obj = {
        status: this.query.status,
        pageNo: this.pagination.pageNo,
        username: this.query.username,
        id: this.query.id,
        type: "2",
      };
      getRepairlist1(obj).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.data.data || [];
          this.pagination.total = res.data.total;
        }
      });
    },
    handleCurrentChange(e) {
      this.pagination.pageNo = e;
      this.getData();
    },
    search() {
      this.pagination.pageNo = 1;
      this.getData();
    },
    //打开操作栏
    open(e) {
      this.$refs.dialog.dialogVisible = true;
      this.$refs.dialog.form = Object.assign(this.$refs.dialog.form, e);
      console.log(this.$refs.dialog.form);
    },
    input1(e) {
      console.log(e, "eeeppp");
    },
    input2(e) {
      console.log(e, "00999");
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 2% 0 0 5%;
}
.table {
  width: 90%;
  margin: 2vw auto;
}
</style>
